<template>
  <div class="pagestyle">
    <div class="table_box">
      <div class="fbc" style="padding: 10px 0;font-size:16px;font-weight:700 ">
        <span>班次信息</span>
        <span
          v-if="state.editShow && userStore.modify"
          :class="state.showdeladd ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="btnClick(0,'')"
        >
          <svg-icon
            :class="state.showdeladd ? 'active' : ''"
            class-name="search-icon"
            icon-class="bianji"
          />
          编辑
        </span>
        <span
          v-else
          :class="'listInfoBtn'"
          @click="btnClick(1,'')"
        >
          完成
        </span>
        <!-- <el-button link type="primary" v-if="state.editShow" @click="btnClick(0,'')">
          <svg-icon class-name="search-icon" icon-class="chui" />编辑
        </el-button> -->
        <!-- <el-button v-else type="primary" size="small" @click="btnClick(1,'')">完成</el-button> -->
      </div>
      <vxe-table  ref="xGrid" :data="state.tabledata" border="inner">
        <vxe-column v-for="(item,index) in state.options.tableheads" :field="item.field" :title="item.title"
          :params="{name:item.name}" :width="item.width?item.width:''" :key="index">
          <template v-if="item.field === 'classOrder'" #default="{ row }">
            <span v-if="state.editShow">{{ row.classOrder }}</span>
            <vxe-input v-else v-model="row.classOrder" type="text"></vxe-input>
          </template>
          <template v-if="item.field === 'firstClass'" #default="{ row }">
            <span v-if="row.firstClass==true">是</span>
            <span v-else>否</span>
          </template>
          <template v-if="item.field === 'className'" #default="{ row }">
            <span v-if="state.editShow">{{ row.className }}</span>
            <vxe-input v-else v-model="row.className" type="text"></vxe-input>
          </template>
          <template v-if="item.field === 'startTime'" #default="{ row }">
            <span v-if="state.editShow">{{ row.startTime }}</span>
            <el-time-picker v-else format="HH:mm" value-format="HH:mm" v-model="row.startTime" placeholder="请选择" />
          </template>
          <template v-if="item.field === 'endTime'" #default="{ row }">
            <span v-if="state.editShow">{{ row.endTime }}</span>
            <el-time-picker v-else format="HH:mm" value-format="HH:mm" v-model="row.endTime" placeholder="请选择" />
          </template>
        </vxe-column>
        <vxe-column title="操作" v-if="state.showdeladd">
          <template #default="{row,rowIndex}">
            <el-button v-for="(item,index) in state.options.queryList.curdList" :key="index" type="primary" link
              size="small" @click="btnClick(item.type,rowIndex)">{{ item.name }}</el-button>
          </template>
        </vxe-column>
      </vxe-table>
      <div style="text-align: center;" v-if="state.showdeladd">
        <el-button link type="primary" @click="btnClick(2,'')">
          <el-icon>
            <Plus />
          </el-icon>新增
        </el-button>
      </div>

    </div>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import {
    computed,
    reactive
  } from "vue";
  import {
    table_headers
  } from '@/components/commonCom/table_headers';
  import axios from "@/utils/request"
  import _ from 'lodash'
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
  const {
    proxy
  } = getCurrentInstance();
  components: {
    list_controller
  }
  let state = reactive({
    showdeladd:false,
    tabledata: [],
    options: {
      tableheads: computed(() => table_headers.classInfo),
      queryList: {
        dropdownUrl: '',
        curdList: [{
          name: '删除',
          type: 'deleteBtn'
        }],
        querys: [],
        queryMap: new Map([
          ['sensorTypeId', 'safety_pointType'],
          ['deviceTypeId', 'safety_deviceType'],
          ['alarmTypeId', 'alarmType']
        ])
      },
      dataUrl: '/class/info/searchAll',
      addUrl: '/class/info/addClass'
    },
    editShow: true
  })

  function getList() {
    axios.post(state.options.dataUrl, {}).then(res => {
      state.tabledata = res.data.list
    })
  }
  getList()

  function btnClick(type, row) {
    let arr = []
    if (type == 0) {
      state.editShow = !state.editShow
      state.showdeladd=true
    } else if (type == 1) {
      state.tabledata.forEach((item, index) => {
        if (index != 0) {
          item.firstClass = false
        } else {
          item.firstClass = true
        }
        arr.push({
          classOrder: item.classOrder,
          className: item.className,
          firstClass: item.firstClass,
          startTime: item.startTime,
          endTime: item.endTime
        })
      })
      axios.post(state.options.addUrl, arr).then(res => {
        if (res.code == 200) {
          state.editShow = !state.editShow
          getList()
          state.showdeladd=false
          proxy.$modal.msgSuccess(res.msg);
        }else{
          state.showdeladd=true
        }
      })


    } else if (type == 'deleteBtn') {
      state.tabledata.splice(row, 1);
    } else if (type == 2) {
      state.tabledata.push({
        classOrder: '',
        className: '',
        firstClass: false
      })
    }
  }
</script>
<style scoped>
.table_box{
  height: calc(100vh - 150px) !important;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 10px;
  border-radius: 8px;
}
  .table_box {
    margin:0 10px 0;
    padding: 10px;
    /* height: calc(100vh - 154px); */
  }
</style>